<#assign base=request.contextPath>
<!DOCTYPE html> 
<html lang="zh-CN">
	<head>
		<#include "common/reference.ftl"/>
		<script type="text/javascript">
		<!--
			$(function(){
				var parent = window.parent;
				if(parent != null){
					if(parent.tologin != null){
						parent.tologin();
					}
				}
				winResize();
				$(window).resize(winResize);
				
				$('#authImg').click(function(){
					var srcUrl = '${base}/authImage?r='+Math.random();
					$(this).attr('src', srcUrl);
				});
				$('#btnChangeImage').click(function(){
					var srcUrl = '${base}/authImage?r='+Math.random();
					$('#authImg').attr('src', srcUrl);
				});
			});
			
			function winResize(){
				var width = $(window).width();
				var height = $(window).height();
				
				$('#loginImage').width(width);
				$('#loginImage').height(height);
			}
		//-->
		</script>
	</head>
	<body class="${configs["skinName"]} login-layout">
		<div class="main-container">
			<img id="loginImage" src="${base}/resources/img/login_bg.jpg" style="position:absolute;width:100%;top:0;bottom;" />
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container" style="width:400px;">
							<div class="center">
								<h2>
									<span class="title">${configs["systemName"]}</span>
								</h2>
								<h4 class="white">© ${configs["compony"]}</h4>
							</div>
							<div class="space-6"></div>
							<div class="position-relative">
								<div class="login-box visible widget-box no-border" style="background:rgba(230, 230, 236, 0.22);">
									<div class="widget-body"  style="background:rgba(255, 255, 255, 0.14);">
										<div class="widget-main" style="background:rgba(45, 16, 17, 0.33);">
											<h4 class="header lighter bigger white">
												<i class="fa fa-coffee"></i>
												登陆
											</h4>
											<div class="space-6"></div>
											<form role="form" action="${base}/login" method="post">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input autofocus="true" name="userName" class="form-control" type="text" placeholder="请输入用户名">
															<i class="fa fa-user"></i>
														</span>
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input name="password" class="form-control" type="password" placeholder="请输入密码">
															<i class="fa fa-lock"></i>
														</span>
													</label>
													<label class="block clearfix">
														<div class="input-group">
															<input name="validCode" class="form-control" type="text" placeholder="请输入验证码">
															<span class="input-group-addon" style="padding:0px !important;background-color:#fff;">
																<img id="authImg" src="${base}/authImage" width="100px" height="30px" />
																<a id="btnChangeImage" href="javascript:void(0);" class="btn btn-minier btn-light">看不清？</a>
															</span>
														</div>
													</label>
													<div class="space"></div>
													<div class="clearfix">
														<label class="inline">
															<#if errorInfo?exists>
																<div class="error ${display}">${errorInfo}</div>
															</#if>
														</label>
														<button class="width-35 pull-right btn btn-sm btn-primary" type="submit">
															<i class="fa fa-key"></i>
															登 陆
														</button>
													</div>
												</fieldset>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>